<template>
  <ul class="common-lists">
    <li v-for="(list,index) in data" :key="index">
      <div class="common-lists__name">
        <span>{{list.name}}</span>
        <span>-</span>
        <span>{{list.author}}</span>
      </div>
      <div class="common-lists__icon">
        <span><img src="../../assets/imgs/icons/play-icon-s.svg" alt="" @click="toPlay(list)"></span>
		<!-- <span><img src="../../assets/imgs/icons/play-icon-s.svg" alt="" @click="toPlay(list)"></span> -->
        <span><img src="../../assets/imgs/icons/heart-icon.svg" alt="" ></span>
        <span><img src="../../assets/imgs/icons/download-icon.svg" alt=""></span>
    
      </div>
    </li>

  </ul>
</template>

<script lang="ts">

  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from "vue-property-decorator";
  import {recommendListInterface} from "../../interfaces/recommendListInterface";
  import {Actions, Store} from "../../enums/Store";
  import {State} from "vuex-class";
  import {SkinInterface,ModalInterface} from "../../interfaces/PageInterface";
  @Component()

  export default class CommonLists extends Vue {
    @Prop({ required: true, type: Array }) data: recommendListInterface[]
    @Prop({type:Boolean})isCollect;
	
	private toPlay(item){
		console.log(item.hash)
		this.$axios.get(`/kugou/music?cmd=playInfo&hash=${item.hash}`).then(res => {
			console.log(res.data)
			this.$store.dispatch(Actions.GetCurrentSongs,res.data)
			this.$store.dispatch(Actions.GetIsModal,true)
			// this.$store.dispatch(Actions.GetCurrentSongs,data)
		})
	}
  }
</script>
<style lang="scss">
  @include component(common-lists){
     grid-column: 1 / 2 span;

      li{
        border-bottom: 1px solid #ccc;
        padding: $mobile-row-1 0;
      }


    @include part(name){
      display: inline-block;
      width: 65%;
      overflow: hidden;

      span{
        display: inline-block;

        &:not(:nth-child(2)){
          width: 40%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }

        &:nth-child(2){
          vertical-align:top;
        }
      }
    }

    @include part(icon){
      display: inline-block;
      width: calc(35% - 10px);
      text-align: center;

      span{
        display: inline-block;

      }

    }
  }
</style>
